<template>
  <page-scroll :footer="false">
    <template #bg>
      <div class="bg"></div>
    </template>
    <template #header>
      <gltitle
        :is_name="true"
        :is_back="true"
        :is_lang="false"
        :is_kf="false"
      />
    </template>
    <template #content>


      <div class="container">

        <div class="empty db rel" style="z-index: 3;" v-show="emptyShow">
          <div class="flexs">
            <van-empty
              class="custom-image"
              :image="require('../../assets/images/none.png')"
              :description="$t('load.doc1') "
            />
          </div>
        </div>


        <div class="videoList">
          <van-pull-refresh
            v-model="refreshing"
            :success-text="$t('load.refreshed')"
            @refresh="onRefresh(0)"
            head-height="200"
            v-if="!emptyShow"
          >
            <van-list
              v-model="loading"
              :finished="finished"
              :finished-text="$t('load.no_more')"
              :loading-text="$t('load.loading')"
              @load="onLoad"
              :immediate-check="check"
            >
              <ul class="list">
                <li v-for="(item,k) in datalist" :key="k" @click="checkLevel(item)">
                  <div class="pic">
                    <img v-lazy="item.coverUrl"/>
                  </div>
                  <div class="text-wrapper">
                    <div class="nowrap-1">{{ item.name }}</div>
                    <div class="flex justify-between items-center score">
                      <van-rate v-model="item.score" readonly color="#ffcd1e"/>
                    </div>
                    <div class="flex items-center justify-between score-wrapper">
                      <div class="score">{{ $t('page.score') }} {{ item.score }}</div>
                      <div class="like">{{ $t('page.like') }}</div>
                    </div>
                  </div>
                </li>
              </ul>
            </van-list>
          </van-pull-refresh>
        </div>

      </div>

    </template>
  </page-scroll>
</template>
<script>
export default {
  data() {
    return {
      title: this.$route.query.title,
      datalist: [],
      loading: false,
      finished: false,

      totalPage: "",
      pageSize: 0,
      refreshing: false,
      emptyShow: false,
      datalistNum: 0,
      check: true,
      cid: this.$route.query.id,
      levelData: [],
    };
  },
  computed: {
    userData() {
      return this.$store.state.userData;
    },
  },
  mounted() {
    document.title = this.title
    this.getLevel()
  },
  methods: {
    checkLevel(item) {
      // if (this.userData.level > -1) {
      //   let levelInfo = {}
      //   for (let i = 0; i < this.levelData.length; i++) {
      //     if (this.levelData[i].level == this.userData.level) {
      //       levelInfo = this.levelData[i]
      //       break;
      //     }
      //   }
      // if (levelInfo.incomeDailyCount - levelInfo.incomeDailyUseCount > 0) {
      this.path_url('/home/vrdetails?id=' + item.movieId)
      // } else {
      //   this.$toast(this.$t('new.doc51'))
      // }
      // } else {
      //   this.$toast(this.$t('new.doc50'))
      // }
    },
    getLevel() {
      this.$post(this.URL.wallet.level, {}).then((res) => {
        if (res.code == 0) {
          this.levelData = res.data;
        } else {
          this.$toast(res.message);
        }
      });
    },
    onLoad() {
      if (this.refreshing) {
        this.datalist = []
        this.refreshing = false;
      }
      this.getlist();
    },
    onRefresh() {
      this.finished = false
      this.loading = true

      this.pageSize = 0
      this.totalPage = ""

      this.onLoad();
    },


    getlist() {
      this.pageSize = this.pageSize + 1;

      if (this.pageIndex == this.totalPage) {
        this.loading = false;
        this.finished = true

        return;
      }

      this.$post(this.URL.home.category2, {
        categoryId: this.cid,
        page: this.pageSize,
        movieCount: 10
      }).then((res) => {
        if (res.code == 0) {

          if (res.code == 2001) {
            this.loading = true;
            this.finished = false
            this.emptyShow = true
            return
          }
          this.totalPage = res.data.page.totalPage;
          this.pageIndex = res.data.page.index;

          this.datalistNum = res.data.page.count

          let initData = res.data.list;
          this.datalist.push(...initData);
          this.loading = false;


        } else {
          this.$toast(res.message);
        }
      });
    },


    path_url(url) {
      this.$router.push({
        path: url,
        query: {}
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .head {
  background: rgba(17, 85, 59, .1) !important;
}

.page {
  background: #0d2623 url("../../assets/images/main-bg.png") no-repeat scroll;
  background-size: 100% 100vh;
  min-height: 100vh;
  padding-bottom: 60px;
}

.container {
  padding-top: 20px;
}

.videoList {
  .list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    li {
      width: 48%;
      margin-right: 0rem;
      margin-bottom: 0.24rem;
      border-radius: 0.16rem;
      border: 1px solid rgba(18, 93, 55, .4);
      overflow: hidden;
      position: relative;
      background: #091f1f;
      padding: 8px;
      box-shadow: 2px 6px 6px rgba(0,0,0,.3);

      .text-wrapper {
        margin-top: 8px;
        color: #fff;
      }

      .score-wrapper {
        margin-top: 12px;
        .score {
          color: #06c761;
        }
      }

      .like {
        width: 84px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px 0 8px 0;
        color: #fff;
        background: #02d080;
      }

      .pic {
        position: relative;
        width: 100%;

        img {
          border-radius: 0.16rem 0.16rem 0 0;
          width: 100%;
          height: 170px;
          object-fit: cover;
        }

        .abs {
          bottom: 0;
          left: 0;
          font-size: 0.2rem;
          display: flex;
          align-items: center;
          width: 100%;
          padding: 0.16rem;

          .v {
            flex: 1;
            display: flex;
            align-items: center;

            img {
              width: 0.2rem;
              height: 0.2rem;
              margin-right: 0.06rem;
              vertical-align: top;
            }
          }
        }

        .str {
          font-size: 0.24rem;
          position: absolute;
          right: 0;
          bottom: 0;
          background: linear-gradient(270deg,
          #0571fd 0%,
          #7b02fe 100%,
          #7b02fe 100%);
          padding: 0.08rem 0.16rem;
          border-radius: 0.24rem 0rem 0.24rem 0.24rem;

          span {
            line-height: 0.4rem;
            text-align: center;
            display: block;
          }
        }
      }

      button {
        border-radius: 0.8rem;
        background: linear-gradient(90deg, #1b5bff 0%, #c029ff 100%);
        border: 0;
        font-size: 0.24rem;
        color: #fff;
        padding: 0 0.3rem;
        height: 0.48rem;
      }

      .info {
        padding: 0.16rem;

        .title {
          font-size: 0.26rem;
          display: inline-block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .pingfen {
        margin: 0.12rem 0 0.24rem 0;
        font-size: 0.24rem;
        align-items: center;
      }

      &:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>
